import React from 'react';
import { Card, Row, Col, Form, DatePicker, Button, Select } from 'antd';
import moment from 'moment';
import { combineDate } from 'utils/share';
import { AutoSearch } from 'components/common';
import { getEquipmentList } from 'services/equipment';

const Option = Select.Option;


const formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};
const btnItemLayout = {
  labelCol: {
      span: 8
  },
  wrapperCol: {
      offset: 8,
      span: 16
  }
};
const FormItem = Form.Item;

const searHandler = (form, onSearch) => () => {
  form.validateFields((err, values) => {
    if (!err) {
      const params = combineDate([values.dateTime,  values.dateTime]);
      delete values.dateTime;
      onSearch({ ...values, ...params });
    }
  });
};

class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        expand: true,
        dataTemplateId: null
      };
      this.onSelect = this.onSelect.bind(this);
    }

    componentDidMount() {
      // const { form } = this.props;
      // form.setFieldsValue({ dataTemplateItemId: moment() });
    }

    onSelect(params){
      const { queryDataTemplateItems, updateState, form } = this.props;
      updateState({ templateList: [] });
      form.setFieldsValue({ dataTemplateItemId: undefined });
      queryDataTemplateItems({ dataTemplateId: params.dataTemplateId });
    }

    renderBtn() {
        const { form, onSearch } = this.props;
        return (
          <FormItem
            {...btnItemLayout}
          >
            <Button type="primary"onClick={searHandler(form, onSearch)}>搜索</Button>
            <Button htmlType="reset" style={{ marginLeft: 20 }}>重置</Button>
          </FormItem>
        );
      }
    
    render(){
        const { 
          form,
          equipList,
          getEquipList,
          templateList = []
         } = this.props;
        const { expand } = this.state;
        const { getFieldDecorator } = form;
        const equipProps = {
          preSearch: true,
          placeholder: '请选择设备',
          preFetchList: getEquipList,
          dataSource: equipList,
          fetchList: getEquipmentList,
          onSelect: this.onSelect,
          result: data => data.data.data,
          searchKey: 'deviceName',
          keys: ['name']
        };
        return (
          <Card>
            <Form layout="horizontal">
              <Row gutter={16}>
                <Col span="8">
                  <FormItem
                    label="设备名称"
                    {...formItemLayout}
                   >
                    {getFieldDecorator('eqId', {
                          initialValue: '',
                          rules: [{ required: true, message: '请选择设备名称' }]
                      })(
                        <AutoSearch {...equipProps} />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem
                    label="监控字段"
                    {...formItemLayout}
                   >
                    {getFieldDecorator('dataTemplateItemId', {
                          initialValue: undefined,
                          rules: [{ required: true, message: '请选择监控字段' }]
                      })(
                        <Select
                          placeholder='请选择监控字段'
                          >
                          {
                            templateList.length && templateList.map((item, key) => 
                              <Option value={item.id} key={item.id}>{item.name}</Option>)
                          }
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem
                    label="选择日期"
                    {...formItemLayout}
                  >
                    {getFieldDecorator('dateTime', {
                    initialValue: moment(),
                    rules: [{ required: true, message: '请选择选择日期' }]
                })(<DatePicker
                  style={{ width: '100%' }}
                  // format="YYYY-MM-DD"
                  />)
                  }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem
                    label="数据状态"
                    {...formItemLayout}
                   >
                    {getFieldDecorator('except', {
                          initialValue: undefined
                      })(
                        <Select
                          placeholder='请选择数据状态'
                          >
                          <Option value="false">正常</Option>
                          <Option value="true">异常</Option>
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  {expand && this.renderBtn()}
                </Col>
              </Row>
            </Form>
          </Card>
        );
    }
}

export default Form.create({})(SearchBar);